<template>
  <div class="selectCor">
    <div>
      <el-input class="searchInput"
                placeholder="请输入搜索内容"
                prefix-icon="el-icon-search"
                @blur="searchContentHandler"
                v-model="searchContent">
      </el-input>
      <el-button  class="searchFun" type="primary"  icon="el-icon-search" @click="search">搜索</el-button>
    </div>
    <div v-for="item in Teacher" style="margin-top: 40px">
        <div class="course">
          <div class="courseName">教师ID:{{item.id}}</div>
          <div class="courseName">教师姓名:{{item.name}}</div>
          <div class="courseTec">性别:{{item.gender}}</div>
          <div class="courseLevel">教师年龄:{{item.age}}</div>
          <div class="courseNum">教师学历:{{item.level}}</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
      action(){
        this.findTec()
        this.findStu()
      },
      findStu(){
        let _this=this
        this.$axios({
          method:"GET",
          url:"http://localhost/student/findByUsername/"+_this.username
        }).then(response => {
          _this.sid=response.data.id
        })
      },
      findTec(){
        let _this=this
        this.$axios({
          method:"GET",
          url:"http://localhost/teacher/findAll"
        }).then(response => {
         _this.Teacher=response.data
        })
      },


      search(){
        let _this=this
        this.$axios({
          method:"GET",
          url:'http://localhost/teacher/searchTeacher/'+_this.searchContent
        }).then(result => {
          _this.Teacher=result.data
        })
      },
    searchContentHandler(){
      if(this.searchContent==='') this.action();
    },

  },
  mounted() {
     this.username=this.$route.query.username
     this.action()

  },
  data() {
    return {
      Teacher:[],
      username:'',
      sid:'',
      searchContent:'',
    }
  },

}
</script>

<style scoped>
.selectCor{
  position: absolute;
  left: 150px;
  width: 89.9%;
  height: 800px;
  overflow-y: auto;

}
.course{
  margin-left: 300px;
  width: 400px;
  height: 130px;
  border-style:solid;
  border-width:1px;
  border-color: black;
  background-color: aquamarine;
  margin-top: 5px;
}
.courseName{
  padding-right: 260px;
  left: 30px;
}
.courseTec{
  padding-right: 260px;
  left: 30px;
  top:25px
}
.courseLevel{
  padding-right: 290px;
  left: 30px;
  top:50px
}
.courseNum{
  padding-right: 230px;
  left: 30px;
  top:75px
}
.searchInput{
  margin-top: 20px;
  width: 300px;
  margin-left: -190px;
}

</style>
